<template>
  <div class="new-default-layout">
    <!-- 左侧示例列表 -->
    <div class="left-panel">
      <ExampleList />
    </div>
    
    <!-- 中央编辑区域 -->
    <div class="center-panel">
      <Drag :number="2" dir="v" :config="[{ min: 0 }, { min: 48, default: 48 }]">
        <DragItem :index="0" :disabled="false" title="编辑器">
          <Editor />
        </DragItem>
        <DragItem :index="1" :disabled="false" title="控制台">
          <Console />
        </DragItem>
      </Drag>
    </div>
    
    <!-- 右侧预览区域 -->
    <div class="right-panel">
      <Preview />
    </div>
  </div>
</template>

<script setup>
import Editor from '@/components/Editor.vue'
import Preview from '@/components/Preview.vue'
import Console from '@/components/Console.vue'
import Drag from '@/components/Drag.vue'
import DragItem from '@/components/DragItem.vue'
import ExampleList from '@/components/ExampleList.vue'
</script>

<style scoped lang="less">
.new-default-layout {
  display: grid;
  grid-template-columns: 300px 1fr 400px;
  height: 100vh;
  gap: 1px;
  background: var(--border-color);
  
  .left-panel {
    background: var(--left-panel-bg);
    border-right: 1px solid var(--left-panel-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  
  .center-panel {
    background: var(--bg-color);
    overflow: hidden;
  }
  
  .right-panel {
    background: var(--bg-color);
    border-left: 1px solid var(--border-color);
    overflow: hidden;
  }
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .new-default-layout {
    grid-template-columns: 280px 1fr 380px;
  }
}

@media (max-width: 1200px) {
  .new-default-layout {
    grid-template-columns: 250px 1fr 350px;
  }
}

@media (max-width: 1024px) {
  .new-default-layout {
    grid-template-columns: 220px 1fr 320px;
  }
}

@media (max-width: 768px) {
  .new-default-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
  
  .left-panel {
    display: none;
  }
  
  .right-panel {
    border-left: none;
    border-top: 1px solid var(--border-color);
  }
}

/* 深色主题支持 */
[data-theme="dark"] .new-default-layout {
  background: var(--border-color);
  
  .left-panel {
    background: var(--left-panel-bg);
    border-right-color: var(--left-panel-border);
  }
  
  .center-panel {
    background: var(--bg-color);
  }
  
  .right-panel {
    background: var(--bg-color);
    border-left-color: var(--border-color);
  }
}
</style> 